import React, { useState, useEffect } from 'react';
import moment from 'moment';
import {
  Steps,
  Input,
  Form,
  Row,
  Col,
  Cascader,
  DatePicker,
  Upload,
  Modal,
  Button,
  Space,
  Collapse,
  message,
} from 'antd';
import styles from './index.css';
import {
  ExclamationCircleFilled,
  DeleteOutlined,
  CloseCircleFilled,
} from '@ant-design/icons';
import {
  queryAddressForFourLinkage,
  saveDrafts,
  publishActivity,
  queryByUpdate,
} from '../../api/request';
import { isnullObj } from '../../Control/deepCopy';
import ImgCrop from 'antd-img-crop';

import SignUpForm from '../../component/signUpForm/index';
import VoteForm from '../../component/VoteForm/index';
import RobTicketsForm from '../../component/RobTicketsForm/index';
import SignInForm from '../../component/SignInForm/index';
import LuckyDrawForm from '../../component/LuckyDrawForm/index';

const { Step } = Steps;

const { RangePicker } = DatePicker;
const { TextArea } = Input;
const { Panel } = Collapse;
const { confirm } = Modal;

const updataBoxText = () => {
  return (
    <div className={styles.updataBoxText}>
      <p>+</p>
      <p>添加图片</p>
    </div>
  );
};

export default function addActivity(props) {
  // 填写进度
  const [fillProgress, setFillProgress] = useState(0);
  //基础信息form表单值
  const [activityFormData, setActivityFormData] = useState();
  //获取的地区列表状态值，用于动态渲染地区选择框
  const [locationList, setLocationList] = useState([]);
  //活动图列表
  const [activityChart, setActivityChart] = useState([]);
  //缩略图列表
  const [thumbnailList, setThumbnailList] = useState([]);
  //控制模块的显示或隐藏
  const [previewVisible, setPreviewVisible] = useState(false);
  //当前展开的Collapse
  const [collapseActiveKey, setCollapseActiveKey] = useState([]);
  //activityBasicId存放
  const [activityBasicId, setActivityBasicId] = useState('');
  //模块显示的图片链接
  const [modalImage, setModalImage] = useState('');
  //创建表单实例
  const [activityForm] = Form.useForm();

  const [signUpForm] = Form.useForm();
  const [signUpFormData, setSignUpFormData] = useState({});

  const [voteForm] = Form.useForm();
  const [voteFormData, setVoteFormData] = useState({});

  const [robTicketsForm] = Form.useForm();
  const [robTicketsFormData, setRobTicketsFormData] = useState({});

  const [signInForm] = Form.useForm();
  const [signInFormData, setSignInFormData] = useState({});

  const [luckyDrawForm] = Form.useForm();
  const [luckyDrawFormData, setLuckyDrawFormData] = useState({});
  // form表单选择目录控制数组
  const [selectForms, setselectForms] = useState([
    {
      title: '报名',
      isAction: false,
      key: 'SignUp',
      formComponent: (Data, list) => {
        return (
          <SignUpForm
            form={signUpForm}
            activityDate={Data.activityDate}
            formData={list[0]}
          />
        );
      },
    },
    {
      title: '投票',
      isAction: false,
      key: 'Vote',
      formComponent: (Data, list) => {
        return (
          <VoteForm
            form={voteForm}
            activityDate={Data.activityDate}
            formData={list[1]}
          />
        );
      },
    },
    {
      title: '门票',
      isAction: false,
      key: 'RobTickets',
      formComponent: (Data, list) => {
        return (
          <RobTicketsForm
            form={robTicketsForm}
            activityDate={Data.activityDate}
            formData={list[2]}
          />
        );
      },
    },
    {
      title: '签到',
      isAction: false,
      key: 'SignIn',
      formComponent: (Data, list) => {
        return (
          <SignInForm
            form={signInForm}
            activityDate={Data.activityDate}
            formData={list[3]}
          />
        );
      },
    },
    {
      title: '抽奖',
      isAction: false,
      key: 'LuckyDraw',
      formComponent: (Data, list) => {
        return (
          <LuckyDrawForm
            form={luckyDrawForm}
            activityDate={Data.activityDate}
            formData={list[4]}
          />
        );
      },
    },
  ]);

  // 上传组件配置数据
  const updataActivityChartInfo = {
    resize: false, //裁剪是否可以调整大小
    resizeAndDrag: true, //裁剪是否可以调整大小、可拖动
    modalTitle: '编辑图片',
    scale: 100,
    modalCancel: '取消',
    modalOk: '确定',
  };

  // 加载时请求地区数据,根据是否有路由传参判断是否发送请求
  useEffect(() => {
    queryAddressForFourLinkage({
      addressLevel: 1,
    }).then((res) => {
      // console.log(res);
      if (res.data.code == 200) {
        res.data.data.forEach((element) => {
          element.key = element.id;
          element.value = element.addressCode;
          element.label = element.addressName;
          element.isLeaf = false;
        });
        setLocationList(res.data.data);
      } else {
        message.error(res.data.message);
      }
    });
    //根据id获取数据
    if (props.location.state != undefined) {
      queryByUpdate({
        activityBasicId: props.location.state.activityBasicId,
      }).then((res) => {
        //回传基础信息值
        let activityData = res.data.data;
        //存放activityBasicId
        setActivityBasicId(activityData.activityBasicId);
        //删除多余
        //增加俩个上传图片组件的默认值默认值
        setActivityChart([
          {
            uid: '-' + activityData.pictureKey,
            name: activityData.pictureKey,
            status: 'done',
            url: activityData.pictureUrl,
          },
        ]);
        setThumbnailList([
          {
            uid: '-' + activityData.thumbnailPictureKey,
            name: activityData.thumbnailPictureKey,
            status: 'done',
            url: activityData.thumbnailPictureUrl,
          },
        ]);
        //增加转换默认时间值
        activityData.activityDate = [
          moment(activityData.startDate),
          moment(activityData.endDate),
        ];
        activityData.scheduleVOS.forEach((element) => {
          element.scheduleDate = moment(element.scheduleDate);
        });
        activityData.area = [activityData.provinceName, activityData.cityName];
        activityForm.setFieldsValue(activityData);
        setActivityFormData(activityData);
        //获取表单的选中情况,回传数据
        let selectFormsStatus = [...selectForms];
        selectFormsStatus[0].isAction = activityData.isSignUp;
        selectFormsStatus[1].isAction = activityData.isVote;
        selectFormsStatus[2].isAction = activityData.isRobTickets;
        selectFormsStatus[3].isAction = activityData.isSignIn;
        selectFormsStatus[4].isAction = activityData.isLuckyDraw;
        //设置活动信息默认展开项
        let newCollapseActiveKey = selectFormsStatus.map((item) => {
          if (item.isAction) {
            return item.key;
          }
        });
        setCollapseActiveKey(newCollapseActiveKey);
        setselectForms(selectFormsStatus);
        //如果有选中报名则储存报名数据准备传入
        if (activityData.isSignUp) {
          let signUpData = activityData.activityVOS.filter(
            (item) => item.activityType === 1,
          )[0];
          signUpData.SignUpDate = [
            moment(signUpData.startDate),
            moment(signUpData.endDate),
          ];
          setSignUpFormData(signUpData);
        }
        //如果有选中投票则储存投票数据准备传入
        if (activityData.isVote) {
          let voteData = activityData.activityVOS.filter(
            (item) => item.activityType === 2,
          )[0];
          voteData.voteDate = [
            moment(voteData.startDate),
            moment(voteData.endDate),
          ];
          setVoteFormData(voteData);
        }
        //如果有选中门票则储存门票数据准备传入
        if (activityData.isRobTickets) {
          let robTicketsData = activityData.activityVOS.filter(
            (item) => item.activityType === 3,
          )[0];
          robTicketsData.RobTicketsDate = [
            moment(robTicketsData.startDate),
            moment(robTicketsData.endDate),
          ];
          setRobTicketsFormData(robTicketsData);
        }
        //如果有选中签到则储存签到数据准备传入
        if (activityData.isSignIn) {
          let signInData = activityData.activityVOS.filter(
            (item) => item.activityType === 4,
          )[0];
          signInData.SignInDate = [
            moment(signInData.startDate),
            moment(signInData.endDate),
          ];
          setSignInFormData(signInData);
        }
        //如果有选中抽奖则储存抽奖数据准备传入
        if (activityData.isLuckyDraw) {
          let luckyDrawData = activityData.activityVOS.filter(
            (item) => item.activityType === 5,
          )[0];
          luckyDrawData.LuckyDrawDate = [
            moment(luckyDrawData.startDate),
            moment(luckyDrawData.endDate),
          ];
          setLuckyDrawFormData(luckyDrawData);
        }
      });
    }
  }, []);

  // 选择一级后获取二级数据
  const loadData = (selectedOptions) => {
    // console.log(selectedOptions);
    const targetOption = selectedOptions[selectedOptions.length - 1];
    queryAddressForFourLinkage({
      addressLevel: 2,
      parentId: targetOption.addressCode,
    }).then((res) => {
      // console.log(res);
      res.data.data.forEach((element) => {
        element.key = element.id;
        element.value = element.addressCode;
        element.label = element.addressName;
        element.isLeaf = true;
      });
      [{}, {}];
      targetOption.children = res.data.data;
      // console.log(targetOption.children);
      setLocationList([...locationList]);
    });
  };

  // 选择form列表后修改列表状态
  const changeActionForms = (index) => {
    //  console.log(activityFormData);
    let newselectForms = [...selectForms];
    if (newselectForms[index].isAction) {
      confirm({
        title: '取消后该活动的配置内容将被清空?',
        icon: <ExclamationCircleFilled style={{ color: '#e76609' }} />,
        cancelText: '取消',
        okText: '确认',
        onOk() {
          newselectForms[index].isAction = !newselectForms[index].isAction;
          setselectForms(newselectForms);
        },
      });
    } else {
      newselectForms[index].isAction = !newselectForms[index].isAction;
      setselectForms(newselectForms);
    }
  };

  // 地点选择框回调函数
  const changeLocationList = (value, selectedOptions) => {
    // console.log(value, selectedOptions);
  };
  // 时间选择框回调函数
  const changeCativityDate = (dates, dateStrings) => {
    // console.log(dates, dateStrings);
    let newDate = {
      startDate: dateStrings[0],
      endDate: dateStrings[1],
    };
    activityForm.setFieldsValue(newDate);
  };

  // 活动图上传回调函数
  const changeActivityChart = ({ fileList: newFileList }) => {
    if (newFileList.length == 0) {
      setActivityChart(newFileList);
      return;
    }
    if (newFileList[0].status == 'done') {
      let newActivityChart = [];
      newActivityChart.push({
        uid: newFileList[0].originFileObj.uid,
        name: newFileList[0].response.data.imgKey,
        status: newFileList[0].status,
        url: newFileList[0].response.data.imgUrl,
      });
      setActivityChart(newActivityChart);
      let activityChartlink = {
        pictureKey: newFileList[0].response.data.imgKey,
        pictureUrl: newFileList[0].response.data.imgUrl,
      };
      activityForm.setFieldsValue(activityChartlink);
    }
  };
  // 查看活动图预览
  const oftenWatchPreview = async (file) => {
    setModalImage(file.url);
    setPreviewVisible(true);
  };

  // 缩略图上传回调函数
  const changethumbnail = ({ fileList: newFileList }) => {
    if (newFileList.length == 0) {
      setThumbnailList(newFileList);
      return;
    }
    if (newFileList[0].status == 'done') {
      let newThumbnail = [];
      newThumbnail.push({
        uid: newFileList[0].originFileObj.uid,
        name: newFileList[0].response.data.imgKey,
        status: newFileList[0].status,
        url: newFileList[0].response.data.imgUrl,
      });
      // console.log(newThumbnail);
      setThumbnailList(newThumbnail);

      let newThumbnaillink = {
        thumbnailPictureKey: newFileList[0].response.data.imgKey,
        thumbnailPictureUrl: newFileList[0].response.data.imgUrl,
      };
      activityForm.setFieldsValue(newThumbnaillink);
    }
  };
  // 下一步点击触发效果
  const changefillProgress = (status) => {
    switch (status) {
      //点击的是下一步
      case 1:
        activityForm.validateFields().then((resolve) => {
          setFillProgress(status);
          let activityFormdate = activityForm.getFieldValue();
          setActivityFormData(activityFormdate);
        });
        break;
      //点击的是上一步
      case 0:
        setFillProgress(status);
        break;
    }
  };
  // 发布上传
  const finishBasicData = async () => {
    let result = await getFormResult();
    if (result) {
      publishActivity(result).then((res) => {
        if (res.data.code == 200) {
          message.success(res.data.message);
          setActivityBasicId(res.data.data);
        } else {
          message.error(res.data.message);
        }
      });
    } else {
      return;
    }
  };
  // 保存草稿
  const SaveDraft = async () => {
    let result = await getFormResult();
    if (result) {
      saveDrafts(result).then((res) => {
        if (res.data.code == 200) {
          message.success(res.data.message);
          setActivityBasicId(res.data.data);
        } else {
          message.error(res.data.message);
        }
      });
    } else {
      return;
    }
  };
  // 获取form最终结果数据数据
  const getFormResult = async () => {
    let fromResult = await activityForm
      .validateFields()
      .then(async (value) => {
        let result = activityForm.getFieldValue();
        // 选择表单数据
        result.isSignUp = selectForms[0].isAction;
        result.isVote = selectForms[1].isAction;
        result.isRobTickets = selectForms[2].isAction;
        result.isSignIn = selectForms[3].isAction;
        result.isLuckyDraw = selectForms[4].isAction;
        // 选择地区数据
        result.provinceCode = result.area[0];
        result.cityCode = result.area[1];
        //删除时间单位
        // delete result.activityDate;
        //后续回流需要传的数据id，用于更新数据
        result.activityBasicId = activityBasicId;
        //转换基础表单列表时间
        if (result.scheduleVOS.length != 0) {
          for (let i = 0; i < result.scheduleVOS.length; i++) {
            result.scheduleVOS[0].scheduleDate = moment(
              result.scheduleVOS[0].scheduleDate,
            ).format('YYYY-MM-DD');
          }
        }
        //判断用户选择表单情况,至少选中一项
        if (
          result.isSignUp ||
          result.isVote ||
          result.isRobTickets ||
          result.isSignIn ||
          result.isLuckyDraw
        ) {
          result.activityVOS = [];
          // 是否选择了报名
          if (result.isSignUp) {
            let signUpResData = await signUpForm
              .validateFields()
              .then(() => {
                let signUpRes = signUpForm.getFieldValue();
                //处理时间
                signUpRes.startDate = moment(signUpRes.SignUpDate[0]).format(
                  'YYYY-MM-DD HH:mm',
                );
                signUpRes.endDate = moment(signUpRes.SignUpDate[1]).format(
                  'YYYY-MM-DD HH:mm',
                );
                // delete signUpRes.SignUpDate;
                //增加标识
                signUpRes.activityType = 1;
                //循环列表项
                signUpRes.optionalEntryForms = [
                  ...signUpRes.optionalEntryForms,
                ];
                for (let i = 0; i < signUpRes.optionalEntryForms.length; i++) {
                  signUpRes.optionalEntryForms[i].value = '';
                  signUpRes.optionalEntryForms[i].inputType = 1;
                  signUpRes.optionalEntryForms[i].length = 30;
                  signUpRes.optionalEntryForms[i].inputVerifyType =
                    'BaseInput7';
                  signUpRes.optionalEntryForms[i].required = true;
                }
                //转换数字
                signUpRes.numberLimit = Number(signUpRes.numberLimit);
                return signUpRes;
              })
              .catch(() => {
                message.error('报名表单出错！');
              });
            result.activityVOS.push(signUpResData);
          }
          //是否选择了投票
          if (result.isVote) {
            let voteResData = await voteForm
              .validateFields()
              .then(() => {
                let voteRes = voteForm.getFieldValue();
                //处理时间数据
                voteRes.startDate = moment(voteRes.voteDate[0]).format(
                  'YYYY-MM-DD HH:mm',
                );
                voteRes.endDate = moment(voteRes.voteDate[1]).format(
                  'YYYY-MM-DD HH:mm',
                );
                // delete voteRes.voteDate;
                //增加表示
                voteRes.activityType = 2;
                //转换数字
                voteRes.dayVoteLimit = Number(voteRes.dayVoteLimit);
                voteRes.singlePlayerLimit = Number(voteRes.singlePlayerLimit);
                //删除多余列表项目
                // for (let i = 0; i < voteRes.voteObjectVOS.length; i++) {
                //    delete voteRes.voteObjectVOS[i].picture;
                // }

                // console.log('投票表单:',voteRes);
                return voteRes;
              })
              .catch(() => {
                message.error('投票表单出错！');
              });
            result.activityVOS.push(voteResData);
          }
          //是否选择了门票
          if (result.isRobTickets) {
            let robTicketsResData = await robTicketsForm
              .validateFields()
              .then(() => {
                let robTicketsRes = robTicketsForm.getFieldValue();
                robTicketsRes.startDate = moment(
                  robTicketsRes.RobTicketsDate[0],
                ).format('YYYY-MM-DD HH:mm');
                robTicketsRes.endDate = moment(
                  robTicketsRes.RobTicketsDate[1],
                ).format('YYYY-MM-DD HH:mm');
                // delete robTicketsRes.RobTicketsDate;
                //增加标识
                robTicketsRes.activityType = 3;
                //循环增加列表项
                for (
                  let i = 0;
                  i < robTicketsRes.optionalEntryForms.length;
                  i++
                ) {
                  robTicketsRes.optionalEntryForms[i].value = '';
                  robTicketsRes.optionalEntryForms[i].inputType = 1;
                  robTicketsRes.optionalEntryForms[i].length = 30;
                  robTicketsRes.optionalEntryForms[i].inputVerifyType =
                    'BaseInput7';
                  robTicketsRes.optionalEntryForms[i].required = false;
                }
                //转换数字
                robTicketsRes.numberLimit = Number(robTicketsRes.numberLimit);
                return robTicketsRes;
                // console.log('门票表单:',robTicketsRes);
              })
              .catch(() => {
                message.error('门票表单出错！');
              });
            result.activityVOS.push(robTicketsResData);
          }
          //是否选择了签到
          if (result.isSignIn) {
            let signInResData = await signInForm
              .validateFields()
              .then(() => {
                let signInRes = signInForm.getFieldValue();
                //拆分时间
                signInRes.startDate = moment(signInRes.SignInDate[0]).format(
                  'YYYY-MM-DD HH:mm',
                );
                signInRes.endDate = moment(signInRes.SignInDate[1]).format(
                  'YYYY-MM-DD HH:mm',
                );
                // delete signInRes.SignInDate;
                //增加标识
                signInRes.activityType = 4;
                return signInRes;
                // console.log('签到表单:', signInRes);
              })
              .catch(() => {
                message.error('签到表单出错！');
              });
            result.activityVOS.push(signInResData);
          }
          //是否选择了抽奖
          if (result.isLuckyDraw) {
            let luckyDrawResData = await luckyDrawForm
              .validateFields()
              .then(() => {
                let luckyDrawRes = luckyDrawForm.getFieldValue();
                //拆分时间
                luckyDrawRes.startDate = moment(
                  luckyDrawRes.LuckyDrawDate[0],
                ).format('YYYY-MM-DD HH:mm');
                luckyDrawRes.endDate = moment(
                  luckyDrawRes.LuckyDrawDate[1],
                ).format('YYYY-MM-DD HH:mm');
                // delete luckyDrawRes.LuckyDrawDate;
                //转换数字
                luckyDrawRes.luckyDrawNumber = Number(
                  luckyDrawRes.luckyDrawNumber,
                );
                //增加标识
                luckyDrawRes.activityType = 5;
                // 循环处理列表数据
                for (let i = 1; i < luckyDrawRes.prizeVOS.length; i++) {
                  luckyDrawRes.prizeVOS[i].prizeTotal = Number(
                    luckyDrawRes.prizeVOS[i].prizeTotal,
                  );
                  luckyDrawRes.prizeVOS[i].chance = Number(
                    luckyDrawRes.prizeVOS[i].chance,
                  );
                  // delete luckyDrawRes.prizeVOS[i].picture;
                }
                return luckyDrawRes;
                // console.log('抽奖表单:', luckyDrawRes);
              })
              .catch(() => {
                message.error('签到表单出错！');
              });
            result.activityVOS.push(luckyDrawResData);
          }
          return result;
        } else {
          message.error('至少选择一种活动类型');
          return false;
        }
      })
      .catch((value) => {
        message.error('基础表单出错！');
        return value;
      });
    return fromResult;
  };

  // 关闭预览模块页面
  const ModalCancel = () => {
    setPreviewVisible(false);
  };

  return (
    <div className={styles.addActivity}>
      <div className={styles.Progress}>
        <h2 className={styles.title}>创建活动</h2>
        <Steps
          progressDot
          current={fillProgress}
          className={styles.ProgressSteps}
        >
          <Step title="基本信息" />
          <Step title="活动信息" />
        </Steps>
      </div>
      <div
        className={styles.selectForm}
        style={{ display: fillProgress == 0 ? 'none' : 'block' }}
      >
        <p>
          选择你想要创建的活动<span>(可多选)</span>
        </p>
        <ul>
          {selectForms.map((formData, index) => {
            return (
              <li
                key={formData.key}
                className={`${formData.isAction ? styles.action : ''}`}
                onClick={() => changeActionForms(index)}
              >
                {formData.title}
                <CloseCircleFilled
                  className={styles.icon}
                  style={{ display: formData.isAction ? 'block' : 'none' }}
                />
              </li>
            );
          })}
        </ul>
      </div>
      <div className={styles.addForm}>
        <div style={{ display: fillProgress == 0 ? 'block' : 'none' }}>
          <div className={styles.firstDesc}>请填写活动的基本信息</div>
          <div>
            <Form
              form={activityForm}
              name="advanced_search"
              className={styles.antSearchForm}
              autoComplete="off"
            >
              <Row>
                <Col span={10}>
                  <Form.Item
                    name={`activityName`}
                    label={`活动名称`}
                    labelAlign={'left'}
                    labelCol={{ span: 24, offset: 0 }}
                    rules={[
                      {
                        required: true,
                        message: '请输入正确的活动名称',
                      },
                    ]}
                  >
                    <Input
                      placeholder="请输入活动名称"
                      className={styles.StandardWidth}
                      allowClear={true}
                    />
                  </Form.Item>
                </Col>
                <Col span={10}>
                  <Form.Item
                    name={`area`}
                    label={`地区选择`}
                    labelAlign={'left'}
                    labelCol={{ span: 24, offset: 0 }}
                    rules={[
                      {
                        required: true,
                        message: '请选择地区',
                      },
                    ]}
                  >
                    <Cascader
                      className={styles.StandardWidth}
                      options={locationList}
                      loadData={loadData}
                      onChange={changeLocationList}
                      changeOnSelect
                    />
                  </Form.Item>
                </Col>
              </Row>
              <Row>
                <Col span={10}>
                  <Form.Item
                    name={`activityDate`}
                    label={`活动时间`}
                    labelAlign={'left'}
                    labelCol={{ span: 24, offset: 0 }}
                    rules={[
                      {
                        required: true,
                        message: '请选择时间',
                      },
                    ]}
                  >
                    <RangePicker
                      className={styles.RangePicker}
                      showTime={{ format: 'HH:mm' }}
                      format="YYYY-MM-DD HH:mm"
                      onChange={changeCativityDate}
                    />
                  </Form.Item>
                </Col>
                <Col span={10}>
                  <Form.Item
                    name={`activitySite`}
                    label={`活动地点`}
                    labelAlign={'left'}
                    labelCol={{ span: 24, offset: 0 }}
                  >
                    <Input
                      className={styles.StandardWidth}
                      placeholder="请输入活动地点"
                      allowClear={true}
                    />
                  </Form.Item>
                </Col>
              </Row>

              <Row>
                <Col span={10}>
                  <Form.Item
                    name={`activityOrganizers`}
                    label={`活动主办方`}
                    labelAlign={'left'}
                    labelCol={{ span: 24, offset: 0 }}
                  >
                    <Input
                      className={styles.StandardWidth}
                      placeholder="请输入活动主办方"
                      allowClear={true}
                    />
                  </Form.Item>
                </Col>
                <Col span={10}>
                  <Form.Item
                    name={`activityContent`}
                    label={`活动内容`}
                    labelAlign={'left'}
                    labelCol={{ span: 24, offset: 0 }}
                    rules={[
                      {
                        required: true,
                        message: '请输入内容',
                      },
                    ]}
                  >
                    <TextArea
                      autoSize={{ minRows: 2, maxRows: 6 }}
                      style={{ width: '386px' }}
                      placeholder="请输入活动内容"
                    />
                  </Form.Item>
                </Col>
              </Row>

              <Row>
                <Col span={10}>
                  <Form.Item
                    name={`pictureKey`}
                    label={`活动图`}
                    labelAlign={'left'}
                    labelCol={{ span: 24, offset: 0 }}
                    rules={[
                      {
                        required: true,
                        message: '请传入活动图',
                      },
                    ]}
                    extra={
                      <p>
                        <ExclamationCircleFilled style={{ color: '#ffb65a' }} />
                        推荐尺寸：1035*261
                      </p>
                    }
                  >
                    <ImgCrop {...updataActivityChartInfo} aspect={1035 / 261}>
                      <Upload
                        className={styles.updataActivityChartInfo}
                        action={'/campus/campusweb/upload/pictureUpload'}
                        accept={'image/*'}
                        listType="picture-card"
                        fileList={activityChart}
                        name={'multipartFile'}
                        onChange={changeActivityChart}
                        onPreview={oftenWatchPreview}
                      >
                        {activityChart.length < 1 && updataBoxText()}
                      </Upload>
                    </ImgCrop>
                  </Form.Item>
                </Col>
                <Col span={10}>
                  <Form.Item
                    name={`thumbnailPictureKey`}
                    label={`缩略图`}
                    labelAlign={'left'}
                    labelCol={{ span: 24, offset: 0 }}
                    rules={[
                      {
                        required: true,
                        message: '请传入缩略图',
                      },
                    ]}
                    extra={
                      <p>
                        <ExclamationCircleFilled style={{ color: '#ffb65a' }} />
                        推荐尺寸：161*216
                      </p>
                    }
                  >
                    <ImgCrop {...updataActivityChartInfo} aspect={161 / 216}>
                      <Upload
                        className={styles.updataThumbnailInfo}
                        action={'/campus/campusweb/upload/pictureUpload'}
                        accept={'image/*'}
                        listType="picture-card"
                        fileList={thumbnailList}
                        name={'multipartFile'}
                        onChange={changethumbnail}
                        onPreview={oftenWatchPreview}
                      >
                        {thumbnailList.length < 1 && updataBoxText()}
                      </Upload>
                    </ImgCrop>
                  </Form.Item>
                </Col>
                <Modal
                  visible={previewVisible}
                  title={'预览'}
                  footer={null}
                  onCancel={ModalCancel}
                >
                  <img
                    alt="example"
                    style={{ width: '100%' }}
                    src={modalImage}
                  />
                </Modal>
              </Row>

              <div className={styles.firstDesc}>
                请编辑活动日程规划
                <span>（可添加多条）</span>
              </div>

              <Row>
                <Form.List name="scheduleVOS">
                  {(fields, { add, remove }) => {
                    return (
                      <>
                        {fields.map((field) => {
                          return (
                            <Row
                              className={styles.activityPlanningLi}
                              key={field.key + 'Row'}
                            >
                              <Form.Item
                                {...field}
                                key={field.key + 'scheduleName'}
                                name={[field.name, 'scheduleName']}
                                fieldKey={[field.fieldKey, 'scheduleName']}
                                rules={[
                                  {
                                    required: true,
                                    message: '请输入日程名称',
                                  },
                                ]}
                                style={{ margin: '0 8px 0 0' }}
                              >
                                <Input
                                  className={styles.StandardWidth}
                                  placeholder="请输入日程名称"
                                />
                              </Form.Item>
                              <Form.Item
                                {...field}
                                key={field.key + 'scheduleDate'}
                                name={[field.name, 'scheduleDate']}
                                fieldKey={[field.fieldKey, 'scheduleDate']}
                                rules={[
                                  {
                                    required: true,
                                    message: '请选择日常时间',
                                  },
                                ]}
                                style={{ margin: '0 8px 0 0' }}
                              >
                                <DatePicker placeholder="请选择日程时间" />
                              </Form.Item>
                              <DeleteOutlined
                                onClick={() => remove(field.name)}
                                style={{ color: '#d81e06' }}
                                format="YYYY-MM-DD"
                              />
                            </Row>
                          );
                        })}
                        <Col span={10}>
                          <Form.Item>
                            <Button
                              className={styles.StandardWidth}
                              type="dashed"
                              onClick={() => add()}
                              block
                            >
                              + 添加
                            </Button>
                          </Form.Item>
                        </Col>
                      </>
                    );
                  }}
                </Form.List>
              </Row>
            </Form>
          </div>
        </div>
        {fillProgress == 0 ? (
          ''
        ) : (
          <Collapse
            className={styles.Collapse}
            bordered={false}
            defaultActiveKey={collapseActiveKey}
            expandIconPosition={'right'}
            style={{ display: fillProgress == 0 ? 'none' : 'block' }}
          >
            {selectForms.map((recond, index) => {
              if (recond.isAction) {
                return (
                  <Panel header={recond.title} key={recond.key}>
                    {recond.formComponent(activityFormData, [
                      signUpFormData,
                      voteFormData,
                      robTicketsFormData,
                      signInFormData,
                      luckyDrawFormData,
                    ])}
                  </Panel>
                );
              }
            })}
          </Collapse>
        )}

        <Space size={'middle'} style={{ display: 'flex' }}>
          {fillProgress == 0 ? (
            <Button type="primary" onClick={() => changefillProgress(1)}>
              下一步
            </Button>
          ) : (
            ''
          )}
          {fillProgress == 0 ? (
            ''
          ) : (
            <Button
              type="primary"
              style={{ display: fillProgress == 0 ? 'none' : 'block' }}
              onClick={finishBasicData}
            >
              发布
            </Button>
          )}
          {fillProgress == 0 ? (
            ''
          ) : (
            <Button onClick={() => changefillProgress(0)}>上一步</Button>
          )}
          <Button>预览</Button>
          <Button onClick={SaveDraft}>保存草稿</Button>
        </Space>
      </div>
    </div>
  );
}
